<template>
	<div>
		<el-card>
			<el-form class="searchForm" size="small" label-width="70px">
				<el-form-item label="系统模块">
					<el-input v-model="searchData.title" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="操作人员">
					<el-select v-model="searchData.user" filterable placeholder="请选择">
						<el-option
							v-for="item in userOptions"
							:key="item.id"
							:label="item.username"
							:value="item.username"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="操作类型">
					<el-select v-model="searchData.businessType" placeholder="请选择操作类型">
						<el-option
							v-for="item in businessTypeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="操作时间">
					<el-date-picker
						v-model="times"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>

				<div class="searchBtn">
					<el-button type="primary" size="small" @click="keywordSearch"
						><i class="el-icon-search"></i> 搜索</el-button
					>
					<el-button type="info" size="small"><i class="el-icon-delete"></i> 清空</el-button>
				</div>
			</el-form>
			<div>
				<el-table
					:data="tableData"
					height="450"
					border
					style="width: 100%"
					:cell-style="{ 'text-align': 'center' }"
					:header-cell-style="{ 'text-align': 'center' }"
				>
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column type="index" label="序号" width="50"> </el-table-column>
					<el-table-column prop="title" label="系统模块" width="180"> </el-table-column>
					<el-table-column prop="businessType" label="操作类型"> </el-table-column>
					<el-table-column prop="method" label="请求方式"> </el-table-column>
					<el-table-column prop="remoteAddr" label="ip地址"> </el-table-column>
					<el-table-column prop="requestUri" label="请求路径"> </el-table-column>
					<el-table-column prop="user" label="操作人员"> </el-table-column>
					<el-table-column prop="exception" label="操作状态"> </el-table-column>
					<el-table-column prop="createTime" label="操作日期"> </el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-link type="primary" class="el-icon-view el-icon--right" @click="see(scope.row)"
								>查看
							</el-link>
							<el-link type="danger" class="btn" icon="el-icon-delete" @click="deleteLog(scope.row)"
								>删除</el-link
							>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					:total="pagingData.total"
					background
					layout="total,sizes, prev, pager, next"
					:page-size="pagingData.size"
					:page-sizes="[1, 5, 10, 20, 30, 50]"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pagingData.current"
				></el-pagination>
				<el-dialog title="查看日志" :visible.sync="seeDialogVisible" width="70%">
					<el-form :model="logForm" label-position="left" label-width="100px" size="small">
						<el-form-item label="系统模块">
							{{ logForm.title }}
						</el-form-item>
						<el-form-item label="操作类型">
							{{ logForm.businessType }}
						</el-form-item>
						<el-form-item label="请求类型">
							{{ logForm.method }}
						</el-form-item>
						<el-form-item label="ip地址">
							{{ logForm.remoteAddr }}
						</el-form-item>
						<el-form-item label="请求接口路径">
							{{ logForm.requestUri }}
						</el-form-item>
						<el-form-item label="http状态码">
							{{ logForm.status }}
						</el-form-item>
						<el-form-item label="操作人">
							{{ logForm.user }}
						</el-form-item>
						<el-form-item label="操作状态">
							{{ logForm.exception }}
						</el-form-item>
						<el-form-item label="操作日期">
							{{ logForm.createTime }}
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button size="mini" @click="seeDialogVisible = false">取 消</el-button>
						<el-button size="mini" type="primary" @click="seeDialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>

<script>
import moment from "moment"
import { findAllLogs, deleteLog } from "../../../../api/admin/system/log/operationLog"
import { findUserPage } from "../../../../api/admin/permissions/user"
export default {
	name: "operationLog",
	data() {
		return {
			logForm: {},
			seeDialogVisible: false,
			searchData: {
				title: "",
				user: "",
				businessType: "",
				startDate: "",
				endDate: "",
				logType: "1",
			},
			// 分页数据
			pagingData: {
				current: 1,
				total: 0,
				size: 20,
			},
			times: "",
			userOptions: [],
			businessTypeOptions: [
				{
					label: "新增",
					value: "新增",
				},
				{
					label: "修改",
					value: "修改",
				},
				{
					label: "删除",
					value: "删除",
				},
				{
					label: "导入",
					value: "导入",
				},
				{
					label: "删除",
					value: "删除",
				},
				{
					label: "生成代码",
					value: "生成代码",
				},
				{
					label: "文件上传",
					value: "文件上传",
				},
				{
					label: "文件下载",
					value: "文件下载",
				},
				{
					label: "文件预览",
					value: "文件预览",
				},
				{
					label: "强制退出",
					value: "强制退出",
				},
				{
					label: "定时任务开启",
					value: "定时任务开启",
				},
				{
					label: "定时任务停止",
					value: "定时任务停止",
				},
			],
			tableData: [],
			titleoptions: [],
		}
	},
	created() {
		this.init()
		findUserPage({}).then((res) => {
			this.userOptions = res.data.data.records
		})
	},
	methods: {
		init() {
			let search = {
				...this.searchData,
				total: this.pagingData.total,
				size: this.pagingData.size,
				current: this.pagingData.current,
			}
			findAllLogs(search).then((res) => {
				this.tableData = res.data.data.records
				this.pagingData.total = res.data.data.total
				this.pagingData.size = res.data.data.size
				this.pagingData.current = res.data.data.current
				this.tableData.forEach((log) => {
					if (log.exception == null || log.exception == "") {
						log.exception = log.title + "操作成功"
					} else {
						log.exception = log.title + "操作失败"
					}
				})
			})
		},
		keywordSearch() {
			if (this.times.length > 0) {
				this.searchData.startDate = moment(this.times[0]).format("YYYY-MM-DD mm:ss")
				this.searchData.endDate = moment(this.times[1]).format("YYYY-MM-DD mm:ss")
			}
			let search = {
				...this.searchData,
				total: this.pagingData.total,
				size: this.pagingData.size,
				current: this.pagingData.current,
			}
			findAllLogs(search).then((res) => {
				this.tableData = res.data.data.records
				this.pagingData.total = res.data.data.total
				this.pagingData.size = res.data.data.size
				this.pagingData.current = res.data.data.current
				this.tableData.forEach((log) => {
					if (log.exception == null || log.exception == "") {
						log.exception = log.title + "操作成功"
					} else {
						log.exception = log.title + "操作失败"
					}
				})
			})
		},
		deleteLog(row) {
			deleteLog(row.id).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("删除日志成功")
					this.init()
				} else {
					this.$message.error("删除日志失败")
				}
			})
		},
		// 页码切换
		handleSizeChange(val) {
			this.pagingData.size = val
			this.keywordSearch()
		},
		// 当前页切换
		handleCurrentChange(val) {
			this.pagingData.current = val
			this.keywordSearch()
		},
		see(row) {
			this.logForm = row
			this.seeDialogVisible = true
		},
		/**
		 * 重置搜索框
		 */
		clean() {
			this.searchData = {}
			this.times = []
		},
	},
}
</script>

<style lang="scss" scoped>
@import "~@/style/admin/system/log/operationLog.scss";
@import "~@/style/publicPage.scss";
</style>
